import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'

import next from '@assets/images/next-piece.png'
import album from '@assets/images/album.png'
import comment from '@assets/images/comment.png'
import favorite from '@assets/images/favorite.png'
import myVideo from '@assets/images/myVideo.png'
import share from '@assets/images/share.png'
import singer from '@assets/images/singer.png'
import download from '@assets/images/download.png'

import './index.scss'

class ActionSheet extends Component {
  constructor(props) {
    super(props)
    this.state = {
      
    }
  }

  handleHidden () {
    this.props.onHidden()
  }

  render() {
    const scrollTop = 0
    return (
      <View className='action-sheet' onClick={this.handleHidden.bind(this)} style={{display: this.props.isOpened ? 'block' : 'none'}}>
        <View className={['action-sheet__content', this.props.isOpened ? 'action-sheet__active': null].join(' ')}>
          <View className='at-row at-row__align--center action-sheet__title'>
            <View className='at-col at-col-2'>
              <Image src={this.props.songInfo.al.picUrl} className='action-sheet__img' />
            </View>
            <View className='at-col at-col-7 title-content'>
              <View className='action-sheet__text'>{this.props.songInfo.name}</View>
              <View className='action-sheet__name'>
                <Text className='action-sheet__label'>VIP</Text>
                <Text>{this.props.songInfo.ar[0].name}</Text>
              </View>
            </View>
            <View className='at-col at-col-3'>
              <Text className='vip'>开通VIP畅享</Text>
            </View>
          </View>
          <View className='text'>
            开通VIP畅享千万曲库下载特权
          </View>
          <ScrollView
            className='scroll-view'
            scrollY
            scrollWithAnimation
            scrollTop={scrollTop}
          >
            {
              this.props.sheetList.map((item, index) => {
                return (
                  <View
                    key={item + index}
                    className='action-sheet-item'
                  >
                    <Image src={item.imgSrc} className='action-sheet-item__img' />
                    <Text className='action-sheet-item__text'>{item.title}</Text>
                  </View>
                )
              })
            }
          </ScrollView>
        </View>
      </View>
    )
  }
}

ActionSheet.defaultProps = {
  sheetList: [
    {
      title: '下一首播放',
      imgSrc: next
    },
    {
      title: '收藏到歌单',
      imgSrc: favorite
    },
    {
      title: '下载',
      imgSrc: download
    },
    {
      title: '评论',
      imgSrc: comment
    },
    {
      title: '分享',
      imgSrc: share
    },
    {
      title: '歌手：',
      imgSrc: singer
    },
    {
      title: '专辑：',
      imgSrc: album
    },
    {
      title: '查看视频',
      imgSrc: myVideo
    }
  ],
  isOpened: false,
  songInfo: {}
}
 
export default ActionSheet
